<template>
  <div class="container">
    <el-tabs v-model="activeName" class="demo-tabs">
      <el-tab-pane label="普通消息" name="first">
        <el-input v-model="textarea" :rows="6" type="textarea" placeholder="请输入消息" />
        <el-button class="btn" type="primary" plain @click="sendMes">发送</el-button>
      </el-tab-pane>
      <el-tab-pane label="卡片消息" name="second">
        <el-input v-model="title" placeholder="请输入标题" />
        <el-input class="text" v-model="text" :rows="5" type="textarea" placeholder="请输入文本" />
        <el-button class="btn" type="primary" plain @click="sendCard">发送</el-button>
      </el-tab-pane>
      <el-tab-pane label="定时消息" name="third">
        <el-input v-model="textarea1" :rows="6" type="textarea" placeholder="请输入消息" />
        <div class="block">
          <span class="demonstration">发送时间</span>
          <el-date-picker v-model="setTime" type="datetime" placeholder="点击选择时间" />
        </div>
        <el-button class="btn" type="primary" plain @click="sendTime">发送</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { postMes, postCard, postTime } from '../request'
import { ElNotification } from 'element-plus'

const activeName = ref('first')

// 发送普通消息
const textarea = ref('')
const sendMes = function () {
  postMes(textarea.value)
    .then(() => {
      ElNotification({
        title: '消息发送成功',
        message: '快去飞书查看消息吧！',
        type: 'success',
        duration: 1000
      })
    })
    .catch((err) => {
      console.log(err);

    })
}

// 发送消息卡片
const title = ref('')
const text = ref('')
const sendCard = function () {
  postCard(title.value, text.value)
    .then(() => {
      ElNotification({
        title: '卡片消息发送成功',
        message: '快去飞书查看消息吧！',
        type: 'success',
        duration: 1000
      })
    })
    .catch((err) => {
      console.log(err)
    })
}

// 发送定时消息
const setTime = ref('')
const textarea1 = ref('')
const sendTime = function () {
  // console.log(setTime.value)
  postTime(textarea1.value, setTime.value)
    .then(() => {
      ElNotification({
        title: '定时消息设定成功',
        message: '等待消息发送吧！',
        type: 'success',
        duration: 1000
      })
    })
    .catch((err) => {
      console.log(err)
    })
}

</script>

<style scoped>
.container {
  width: 500px;
  height: 310px;
  margin: 200px auto 0;
  padding: 10px 20px;
  background-color: rgba(248, 250, 239);
  border-radius: 10px;
  box-shadow: 0px 0px 50px 30px rgb(96, 94, 94);
  opacity: .85;
}

.btn,
.text,
.block {
  margin-top: 14px;
}

.demonstration {
  margin-right: 14px;
}
</style>